Directive Info

This directive executes at priority level 0.

Usage

<input type="text"
       ng-model=""
       [name=""]
       [required=""]
       [ng-required=""]
       [ng-minlength=""]
       [ng-maxlength=""]
       [ng-pattern=""]
       [ng-change=""]
       [ng-trim=""]>

Arguments

Param	Type	Details
ngModel	string	Assignable angular expression to data-bind to.
name (optional)	string	Property name of the form under which the control is published.
required (optional)	string	Adds `required` validation error key if the value is not entered.
ngRequired (optional)	string	Adds `required` attribute and `required` validation constraint to the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of `required` when you want to data-bind to the `required` attribute.
ngMinlength (optional)	number	Sets `minlength` validation error key if the value is shorter than minlength.
ngMaxlength (optional)	number	Sets `maxlength` validation error key if the value is longer than maxlength.
ngPattern (optional)	string	Sets `pattern` validation error key if the value does not match the RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for patterns defined as scope expressions.
ngChange (optional)	string	Angular expression to be executed when input changes due to user interaction with the input element.
ngTrim (optional)	boolean	If set to false Angular will not automatically trim the input.

Example

Edit in Plunker

<script>
  function Ctrl($scope) {
    $scope.text = 'guest';
    $scope.word = /^\s*\w*\s*$/;
  }
</script>
<form name="myForm" ng-controller="Ctrl">
  Single word: <input type="text" name="input" ng-model="text"
                      ng-pattern="word" required ng-trim="false">
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Single word only!</span>

  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>

var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('text'));

it('should initialize to model', function() {
  expect(text.getText()).toContain('guest');
  expect(valid.getText()).toContain('true');
});

it('should be invalid if empty', function() {
  input.clear();
  input.sendKeys('');

  expect(text.getText()).toEqual('text =');
  expect(valid.getText()).toContain('false');
});

it('should be invalid if multi word', function() {
  input.clear();
  input.sendKeys('hello world');

  expect(valid.getText()).toContain('false');
});